<template>
    <article class="homePage-HMYSDynamic-box">
        <div class="container">
            <div class="content">
                <header class="clearfix public-header-bg">
                    <p>华美优胜动态</p>
                    <p>DYNAMIC</p>
                </header>
                <a-row>
                    <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="left-box">
                        <h5><router-link to="/Exhibition" title="查看更多华美优胜展会活动" alt="查看更多华美优胜展会活动">查看更多>></router-link></h5>
                        <a-row class="exhibition-list" v-show="!noDataShow">
                            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" v-for="(item, index) in exhibitionList" :key="index" class="li">
                                <a-card :title="null" hoverable :loading="exhibitionListLoading">
                                    <router-link :to="{path: 'ExhibitionDetails', query: {exhibitionId: item.id }}" target="_blank" :title="item.title" :alt="item.title">
                                        <img v-lazy="item.photo" :title="item.seoTitle" :alt="item.seoTitle" >
                                        <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                                    </router-link>
                                    <div class="bottom">
                                        <p class="webkit-text-overflow-1lines">
                                            <span>{{ isNull0(item.activityTime) }}</span> · <span>{{ isNull0(item.activityAddress) }}</span>
                                        </p>
                                    </div>
                                </a-card>
                            </a-col>
                        </a-row>
                        <h5 style="text-align: center; padding: 15px; line-height: 240px;" v-show="noDataShow">暂未查询到数据！</h5>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="right-box">
                        <header class="clearfix">
                            <span class="left">华美优胜视频</span>
                            <span class="right">HMYS Activities</span>
                        </header>
                        <img src="/static/img/HMYS-Activities-img.jpg" alt="">
                        <h5>公司简介</h5>
                        <p class="webkit-text-overflow-3lines">
                            华美优胜（北京）国际投资咨询有限公司是一家集海外房产投资、海外金融理财、出国移民等领域于一体，为国内高净值人群提供海外资产配置和出国移民的全方位咨询服务的公司。公司成立于2010年，资本实力雄厚，其经营管理团队拥有多年的海外投资置业经验，中国总部设立于北京，并且在上海设有分公司。计划未来几年在更多一二线城市设立分支机构，将更好的服务于全中国！
                        </p>
                        <router-link to="/About" target="_blank" title="华美优胜公司介绍" alt="华美优胜公司介绍">详情>></router-link>
                    </a-col>
                </a-row>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                exhibitionList: [], // 华美优胜动态
                exhibitionListLoading: true,//列表加载loading
                noDataShow: false,//没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
          //华美优胜动态——往期展会活动数据
            this.getExhibitionList()
        },
        methods: {
            //华美优胜动态——往期展会活动数据
            getExhibitionList() {
                this.$get('/expo/list/1/1/3').then(res => {
                    this.exhibitionListLoading = false;
                    if (res.status == 0) {
                        this.exhibitionList = res.list;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                });
            },

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-HMYSDynamic-box{
            >.container{
                >.content{
                    .ant-row {
                        width: 100%;
                        padding: 10px 0;
                        >.left-box{
                            >h5{
                                text-align: right;
                                padding: 10px 30px;
                                >a{
                                    font-size: 15px;
                                    color: #666;
                                    text-decoration: none;
                                }
                                >a:hover{
                                    color: #2b85e4;
                                }
                            }
                            >.exhibition-list {
                                >.li{
                                    padding: 0px 30px 0px 0px;
                                    .ant-card {
                                        > .ant-card-body {
                                            padding: 0;
                                            .ant-card-loading-content{
                                                padding: 20px;
                                                .ant-row {
                                                    padding: 5px 0;
                                                }
                                            }
                                            > a {
                                                display: block;
                                                width: 100%;
                                                height: 100%;
                                                position: relative;
                                                overflow: hidden;
                                                > img {
                                                    width: 100%;
                                                    max-height: 260px;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                                > p {
                                                    width: 100%;
                                                    position: absolute;
                                                    bottom: 0;
                                                    background: rgba(0, 0, 0, .4);
                                                    font-size: 15px;
                                                    color: #fff;
                                                    padding: 0 0 0 12px;
                                                }
                                            }
                                            > a:hover {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                    filter: alpha(opacity=50);
                                                }
                                            }
                                            > .bottom {
                                                padding: 8px;
                                                background: #fff;
                                                > p {
                                                    font-size: 14px;
                                                    > span:first-of-type {
                                                        font-size: 16px;
                                                        color: #f65248;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        >.right-box{
                            background: #41a9ed;
                            padding: 20px;
                            >header{
                                color: #fff;
                                border-bottom: 1px solid #fff;
                                >span:last-of-type{
                                    color: #cec2c8;
                                }
                            }
                            >img{
                                width: 100%;
                                height: 150px;
                                margin: 5px 0 0 0;
                            }
                            >h5{
                                text-align: center;
                                font-size: 16px;
                                color: #fff;
                                margin: 10px 0 0 0;
                            }
                            >p{
                                color: #fff;
                            }
                            >a{
                                float: right;
                                font-size: 15px;
                                color: #bd1321;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
